<template>
<div>
    <van-tabs v-model="activeName" >
  <van-tab :title="item.name" :name="item.id" v-for="item in CategoryListArr" :key='item.id'>
      <h4>{{item.name}}</h4>
      <div >
          <HomeGoods :GoodsListArr='item.goodsList'></HomeGoods>
      </div>
      
     
  </van-tab>
</van-tabs>

</div>
</template>

<script>
import { getIndexData } from "@/utils/http";
import  HomeGoods  from "@/components/HomeGoods";
export default {
name: 'Channel',
data() {
return {
    activeName:'',
    CategoryListArr:[],
    goodsListArr:[],
}
},
props:[''],
components: {
    HomeGoods,
},
methods: {

},
created() {
    getIndexData().then(res=>{
            console.log(res);
            this.bannerArr = res.data.banner
            this.channelArr = res.data.channel
            this.brandList = res.data.brandList
            this.newGoodsListArr = res.data.newGoodsList
            this.HotGoodsListArr = res.data.hotGoodsList
            this.TopicListArr = res.data.topicList
            this.CategoryListArr = res.data.categoryList
            this.GoodsListArr = res.data.categoryList.goodsList
            // console.log( this.CategoryListArr[0].id);
             this.CategoryListArr.map(item=>{
                 this.activeName = item.name
                 return  this.activeName
             })
        })
},
}
</script>

<style scoped>
h4{
    text-align: center;
    font-weight: bolder;
    height: 35px;
    line-height: 35px;
    margin-top: 10px;
    margin-bottom: 10px;
}
</style>